<div class="inbox" fxLayout="column">
  <div class="header mat-elevation-z2"></div>
  <div class="container" fxLayout="row">
    <div class="navigation" fxFlex="250px" [fxHide]="true" [fxHide.gt-md]="false">

      <div class="title-container">
        <mat-icon>mail</mat-icon>
        <span class="title">Mail</span>
      </div>

      <div class="compose-container">
        <button class="compose" mat-raised-button (click)="openComposeDialog()">
          <mat-icon>mode_edit</mat-icon>
          <span>写信</span>
        </button>
      </div>

      <mat-nav-list class="nav-list">
        <h3 mat-subheader>Inbox</h3>
        <a class="nav-item mt0" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">mail</mat-icon>
            <span class="text">收件箱 </span>
          </h3>
        </a>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">group</mat-icon>
            <span class="text">联系人 </span>
          </h3>
        </a>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">local_offer</mat-icon>
            <span class="text">标签 </span>
          </h3>
        </a>
        <mat-divider></mat-divider>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">star</mat-icon>
            <span class="text">星标邮件</span>
          </h3>
        </a>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">send</mat-icon>
            <span class="text">已发送</span>
          </h3>
        </a>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">drafts</mat-icon>
            <span class="text">草稿箱</span>
          </h3>
        </a>
        <mat-divider></mat-divider>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">backspace</mat-icon>
            <span class="text">垃圾邮件</span>
          </h3>
        </a>
        <a class="nav-item" mat-list-item>
          <h3 class="nav-title" mat-line>
            <mat-icon class="icon">delete</mat-icon>
            <span class="text">回收站</span>
          </h3>
        </a>
      </mat-nav-list>

    </div>

    <div class="content-container" fxFlex fxLayout="column">

      <stbui-search class="search" placeholder="搜索..."></stbui-search>

      <div class="mails-container mat-elevation-z2" fxFlex>
        <stb-toolbar [mail]="shownMailDetail" [itemCount]="shownMails.length" (onForward)="onForward($event)"></stb-toolbar>

        <div class="mails">
          <stb-list *ngIf="!shownMailDetail" [mails]="shownMails | async" (onOpenMailDetial)="openMailDetial($event)"></stb-list>
          <stb-detail *ngIf="shownMailDetail" [mail]="shownMailDetail"></stb-detail>
        </div>

      </div>

    </div>

  </div>
</div>

<mat-menu #mailOptions="matMenu">
  <button mat-menu-item> <mat-icon>markunread_mailbox</mat-icon>标记未读 </button>
  <button mat-menu-item> <mat-icon>label</mat-icon> 标签 </button>
  <mat-divider></mat-divider>
  <button mat-menu-item> <mat-icon>delete</mat-icon> 删除 </button>
</mat-menu>
